<template>
  <!-- 列表页面 -->
  <div class="tableSample" v-if="!showAdd && !showEdit">
    <div class="header">
      <div class="header-left">
        <p class="title">
          店面列表
          <el-button
                  type="primary"
                  plain
                  style="margin-left: 30px;"
                  @click="handleAdd"
          >添加</el-button
          >
        </p>
      </div>
      <div class="header-right">
        <lin-search @query="onQueryChange" placeholder="请输入名称" />
      </div>
    </div>
    <!-- 表格 -->
    <lin-table
            border
            :tableColumn="tableColumn"
            :tableData="tableData"
            :operate="operate"
            @handleList="handleList"
            @handleEdit="handleEdit"
            @handleDelete="handleDelete"
            v-loading="loading"
    ></lin-table>
    <!-- 分页 -->
    <div class="pagination" v-if="total_nums > 0">
      <el-pagination
              @current-change="handleCurrentChange"
              :background="true"
              :page-size="pageCount"
              :current-page="currentPage"
              v-if="refreshPagination"
              layout="prev, pager, next, jumper"
              :operate="operate"
              :total="total_nums"
      ></el-pagination>
    </div>
    <el-dialog :title="store_name" width="500px" :visible.sync="dialogVisible">
      <img  :src="dialogImageUrl" >
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="download">二维码下载</el-button>
      </span>
    </el-dialog>
  </div>
  <store-add
          v-else-if="showAdd"
          @addClose="addClose"
          :orderSort="orderSort"
  ></store-add>
  <store-edit
          v-else-if="showEdit"
          @editClose="editClose"
          :StoreId="StoreId"
  ></store-edit>
</template>

<script>
import Store from '@/models/store'
import LinSearch from '@/components/base/search/lin-search'
import LinTable from '@/components/base/table/lin-table'
import StoreAdd from './StoreAdd'
import StoreEdit from './StoreEdit'

export default {
  components: {
    LinSearch,
    LinTable,
    StoreAdd,
    StoreEdit,
  },
  data() {
    return {
      tableColumn: [
        {
          prop: 'name',
          label: '店面名称',
        },
        {
          prop: 'order_sort',
          label: '排序',
          width: 150,
        },
        {
          prop: 'start_day_num',
          label: '提现开始日期',
          width: 150,
        },
        {
          prop: 'end_day_num',
          label: '提现结束日期',
          width: 150,
        },
        {
          prop: 'order_sort',
          label: '排序',
          width: 150,
        },
        {
          prop: 'phone',
          label: '店面电话',
          width: 150,
        },
        {
          prop: 'address',
          label: '地址',
        },
        {
          prop: 'remarks',
          label: '备注',
        },
        {
          prop: 'desc',
          label: '简介',
        },
        {
          prop: 'invite_money',
          label: '客户佣金',
        },
        {
          prop: 'create_time',
          label: '创建时间',
          width: 210,
        },
      ],
      tableData: [],
      operate: [],
      loading: false,
      showAdd: false,
      showEdit: false,
      orderSort: 0,
      StoreId: 0,
      search: {
        name: '',
      },
      // 分页相关
      refreshPagination: true, // 页数增加的时候，因为缓存的缘故，需要刷新Pagination组件
      currentPage: 1, // 默认获取第一页的数据
      pageCount: 10, // 每页10条数据
      total_nums: 0, // 分组内的总数
      dialogImageUrl: '',
      dialogVisible: false,
      store_name: '',
    }
  },
  computed: {},
  created() {
    this._getTableData(this.currentPage, this.pageCount)
    this.operate = [
      { name: '查看门店二维码', func: 'handleList', type: 'primary' },
      { name: '编辑', func: 'handleEdit', type: 'primary' },
      { name: '删除', func: 'handleDelete', type: 'danger' },
    ]
  },
  methods: {
    download() {
      const image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      // eslint-disable-next-line func-names
      image.onload = function () {
        const canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        const context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        const url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        const a = document.createElement('a') // 生成一个a元素
        const event = new MouseEvent('click') // 创建一个单击事件
        a.download = 'img' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = this.dialogImageUrl
    },
    handleList(val) {
      this.dialogVisible = true
      this.dialogImageUrl = val.row.store_url
      this.store_name = val.row.name
    },
    handleDelete(val) {
      this
        .$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          const res = await Store.deleteStore(val.row.id)
          if (res.error_code === 0) {
            this.$message({
              type: 'success',
              message: `${res.msg}`,
            })
            this.loading = true
            this._getTableData(this.currentPage, this.pageCount)
          }
        })
    },
    handleAdd() {
      if (this.tableData.length > 0) {
        this.orderSort = this.tableData[0].order_sort + 1
      }
      this.showAdd = true
    },
    handleEdit(val) {
      this.showEdit = true
      this.StoreId = val.row.id
    },
    addClose() {
      this.showAdd = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    editClose() {
      this.showEdit = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 切换分页
    async handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 搜索姓名
    onQueryChange(query) {
      this.search.name = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 获取数据
    async _getTableData(start, count) {
      const res = await Store.getStoreList(start, count, {
        name: this.search.name,
      })
      this.tableData = res.data
      this.total_nums = res.count
      this.$nextTick(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  .tableSample {
    padding: 0 0 30px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      border-bottom: 1px solid #dae1ed;

      .header-left {
        float: left;

        .title {
          height: 59px;
          line-height: 59px;
          color: $parent-title-color;
          font-size: 16px;
          font-weight: 500;
        }
      }

      .header-right {
        float: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .table-main {
      padding: 0 30px;
      margin-top: 30px;
    }

    .top-operate {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      margin-top: 30px;
    }

    .sort-input {
      width: 50px;
      background: none;
      justify-content: space-around;
    }

    .table-edit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .cell-icon {
        cursor: pointer;
        color: #3963bc;
        font-size: 16px;
      }

      .cell-icon-edit {
        display: flex;
        margin-left: 20px;
        width: 50px;
        justify-content: space-between;

        .cell-cancel {
          cursor: pointer;
          color: #3963bc;
          font-size: 16px;
        }

        .cell-save {
          cursor: pointer;
          color: #3963bc;
          font-size: 16px;
          margin-right: -20px;
        }
      }
    }

    .m-20 {
      margin-bottom: 10px;
      margin-top: 5px;
    }

    .summary {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;

      img {
        width: 135px;
        height: 200px;
      }

      .demo-table-expand {
        font-size: 0;
        margin-left: 30px;
        display: flex;
        flex-direction: column;

        label {
          width: 90px;
          color: #99a9bf;
        }

        .el-form-item {
          margin-right: 0;
          margin-bottom: 0;
          display: flex;
          flex-direction: row;
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      margin: 20px;
    }
  }
  // dialog
  .tableSample /deep/ .el-dialog__footer {
    text-align: center;
    padding-left: 30px;
  }

  .tableSample /deep/ .el-dialog__header {
    padding-left: 30px;
  }

  .tableSample /deep/ .el-dialog__body {
    padding: 30px;
  }
</style>
